<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script>
		// 什么同源策略   请求的地址与当前页面地址，域名，子域名，端口号一致
		// 怎么跨域   jsonp,代理，CORS相应头允许 
		// jsonp的原理   src没有同源限制
		// 统计功能用图片的src没有同源限制
		// 通过ip获取城市
		function jsonp(url){
			return new Promise((resolve,reject)=>{
				// 创建script标签
				var script  = document.createElement("script");
				// 定义回调函数
				var fun = "callback"+Date.now();
				// 拼接url
				var src = "";
				if(url.includes("?")){
					src = url+"&callback="+fun;
				}else{
					src = url+"?callback="+fun;
				}
				// 插入到body
				script.src = src;
				document.body.appendChild(script);
				// 当执行回调函数返回数据
				window[fun] = function(data){
					resolve(data);
					document.body.removeChild(script);
				}
				script.onerror = function(err){
					reject(err)
					document.body.removeChild(script);
				}
			})
		}
		
		jsonp("https://r.inews.qq.com/api/ip2city?otype=jsonp")
		.then(res=>{
			console.log(res);
			return jsonp(`https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.provice}&city=${res.city}`)
		})
		.then(res=>{
			console.log(res,"天气")
		})
		.catch(err=>console.log(err))
		</script>
	</body>
</html>
